<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :sm="4">
        <el-card class="box-card">
          <div class="value">{{ data.total_channel_money || 0 }}</div>
          <div class="subtitle">渠道结算价</div>
        </el-card>
      </el-col>
      <el-col :sm="4">
        <el-card class="box-card">
          <div class="value">{{ data.total_actual_channel_money || 0 }}</div>
          <div class="subtitle">渠道价实际账期金额</div>
        </el-card>
      </el-col>
      <!--      <el-col :sm="4">-->
      <!--        <el-card class="box-card">-->
      <!--          <div class="value">{{ data.total_rate || 0 }}</div>-->
      <!--          <div class="subtitle">锦江订单支付总价</div>-->
      <!--        </el-card>-->
      <!--      </el-col>-->
    </el-row>
    <div class="filter-container">
      <!--      <el-select-->
      <!--          class="filter-item"-->
      <!--          v-model="listQuery.app_client_id"-->
      <!--          placeholder="选择成员公司"-->
      <!--          style="width: 160px"-->
      <!--          clearable-->
      <!--          filterable-->
      <!--          remote-->
      <!--          reserve-keyword-->
      <!--          :remote-method="fetchClientNames"-->
      <!--          :loading="loadingClients"-->
      <!--          @visible-change="handleClientSelectVisible"-->
      <!--      >-->
      <!--        <el-option-->
      <!--            v-for="item in clientNameOptions"-->
      <!--            :key="item.value"-->
      <!--            :label="item.label"-->
      <!--            :value="item.value"-->
      <!--        />-->
      <!--      </el-select>-->

      <el-input
        class="filter-item"
        v-model="listQuery.hotel_name"
        placeholder="酒店名称"
        style="width: 220px"
        clearable
      />

      <el-input
        class="filter-item"
        v-model="listQuery.order_id"
        placeholder="订单号"
        style="width: 220px"
        clearable
      />

      <!--      <el-select class="filter-item" v-model="listQuery.state_arr" placeholder="订单状态" style="width: 160px"-->
      <!--                 multiple-->
      <!--                 clearable>-->
      <!--        <el-option label="新订单" value="0"/>-->
      <!--        <el-option label="已确认" value="1"/>-->
      <!--        <el-option label="已成功" value="2"/>-->
      <!--        <el-option label="已取消" value="3"/>-->
      <!--        <el-option label="已完成" value="4"/>-->
      <!--      </el-select>-->

      <el-input
        class="filter-item"
        v-model="listQuery.order_code"
        placeholder="锦江订单编号"
        style="width: 220px"
        clearable
      />

      <el-select
        class="filter-item"
        v-model="listQuery.order_state_arr"
        placeholder="锦江订单状态"
        style="width: 160px"
        multiple
        clearable
      >
        <el-option label="预订成功" :value="1" />
        <el-option label="已取消" :value="2" />
        <el-option label="预订未到" :value="3" />
        <el-option label="已入住" :value="4" />
        <el-option label="已完成" :value="5" />
      </el-select>

      <el-input
        class="filter-item"
        v-model="listQuery.system_order_no"
        placeholder="系统订单号"
        style="width: 220px"
        clearable
      />

      <el-select
        class="filter-item"
        v-model="listQuery.system_order_status_arr"
        placeholder="系统订单状态"
        multiple
        style="width: 160px"
        clearable
      >
        <el-option label="下单待处理" :value="100" />
        <el-option label="下单成功" :value="101" />
        <el-option label="下单失败" :value="102" />
        <el-option label="取消订单成功" :value="201" />
        <el-option label="取消订单失败" :value="202" />
      </el-select>
      <el-select
        class="filter-item"
        v-model="listQuery.pay_state_arr"
        placeholder="锦江支付状态"
        multiple
        style="width: 160px"
        clearable
      >
        <el-option label="未付款" :value="0" />
        <el-option label="已付款" :value="1" />
        <el-option label="退款处理中" :value="2" />
        <el-option label="已退款" :value="3" />
      </el-select>
      <el-select
        class="filter-item"
        v-model="listQuery.profit_status"
        placeholder="盈亏状态"
        style="width: 160px"
        clearable
      >
        <el-option label="亏损" :value="0" />
        <el-option label="盈利" :value="1" />
      </el-select>
      <div>
        入住时间:
        <el-date-picker
          class="filter-item"
          v-model="dateArr"
          type="daterange"
          :default-time="['00:00:00', '23:59:59']"
          align="right"
          value-format="yyyy-MM-dd"
          unlink-panels
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        ></el-date-picker>
        离店时间:
        <el-date-picker
          class="filter-item"
          v-model="dateArr1"
          type="daterange"
          :default-time="['00:00:00', '23:59:59']"
          align="right"
          value-format="yyyy-MM-dd"
          unlink-panels
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        ></el-date-picker>
        实际离店时间:
        <el-date-picker
          class="filter-item"
          v-model="dateArr3"
          type="daterange"
          :default-time="['00:00:00', '23:59:59']"
          align="right"
          value-format="yyyy-MM-dd"
          unlink-panels
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        ></el-date-picker>
        下单时间:
        <el-date-picker
          class="filter-item"
          v-model="dateArr2"
          type="daterange"
          :default-time="['00:00:00', '23:59:59']"
          align="right"
          value-format="yyyy-MM-dd"
          unlink-panels
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        ></el-date-picker>
        <el-button class="filter-item" type="primary" @click="handleFilter"
          >搜索</el-button
        >
        <download-excel
          class="filter-item"
          :fields="json_fields"
          :fetch="handleExport"
          type="xls"
          name="订单列表.xls"
          worksheet="订单列表"
        >
          <!--      :before-generate="startPost"
            :before-finish="endPost"                :header="header"-->
          <el-button type="success" :loading="exportLoading">
            导出订单列表
          </el-button>
        </download-excel>
      </div>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      :row-class-name="errorRow"
    >
      <el-table-column label="订单号" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.order_id }}
        </template>
      </el-table-column>
      <el-table-column label="成员公司名称" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.app_client ? scope.row.app_client.name : '-' }}
        </template>
      </el-table-column>
      <!--      <el-table-column label="自我游订单状态" min-width="120" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-tag type="primary" v-if="scope.row.state === '0'">新订单</el-tag>-->
      <!--          <el-tag type="warning" v-else-if="scope.row.state === '1'">已确认</el-tag>-->
      <!--          <el-tag type="success" v-else-if="scope.row.state === '2'">已成功</el-tag>-->
      <!--          <el-tag type="danger" v-else-if="scope.row.state === '3'">已取消</el-tag>-->
      <!--          <el-tag type="success" v-else-if="scope.row.state === '4'">已完成</el-tag>-->
      <!--        </template>-->
      <!--      </el-table-column>-->

      <el-table-column label="下单时间" min-width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.order_date }}
        </template>
      </el-table-column>
      <el-table-column label="渠道结算价" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.channel_money }}
        </template>
      </el-table-column>
      <el-table-column
        label="渠道价实际账期金额"
        min-width="140"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.actual_channel_money || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="联系人姓名" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.link_man }}
        </template>
      </el-table-column>

      <el-table-column label="联系人手机" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.link_phone }}
        </template>
      </el-table-column>

      <el-table-column label="入住时间" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.travel_date }}
        </template>
      </el-table-column>

      <el-table-column label="离店时间" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.end_travel_date }}
        </template>
      </el-table-column>
      <el-table-column label="实际离店时间" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.actual_end_travel_date }}
        </template>
      </el-table-column>
      <el-table-column label="酒店名称" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.hotel ? scope.row.hotel.inn_name : '' }}
        </template>
      </el-table-column>

      <el-table-column label="售卖房型名称" min-width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.room_type ? scope.row.room_type.room_type_name : '' }}
        </template>
      </el-table-column>

      <el-table-column label="房间间数" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.room_num }}
        </template>
      </el-table-column>

      <el-table-column label="锦江订单编号" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.order_code }}
        </template>
      </el-table-column>

      <!--      <el-table-column label="锦江订单支付总价" min-width="140" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          {{ scope.row.total_rate }}-->
      <!--        </template>-->
      <!--      </el-table-column>-->

      <el-table-column label="锦江到店时间" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.last_arr_time }}
        </template>
      </el-table-column>

      <el-table-column label="锦江订单状态" min-width="110" align="center">
        <template slot-scope="scope">
          <el-tag type="primary" v-if="scope.row.order_state === 1"
            >预订成功</el-tag
          >
          <el-tag type="danger" v-else-if="scope.row.order_state === 2"
            >已取消</el-tag
          >
          <el-tag type="warning" v-else-if="scope.row.order_state === 3"
            >预订未到</el-tag
          >
          <el-tag type="warning" v-else-if="scope.row.order_state === 4"
            >已入住</el-tag
          >
          <el-tag type="success" v-else-if="scope.row.order_state === 5"
            >已完成</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column label="锦江支付状态" min-width="110" align="center">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.pay_state === 0">未付款</el-tag>
          <el-tag type="success" v-else-if="scope.row.pay_state === 1"
            >已付款</el-tag
          >
          <el-tag type="warning" v-else-if="scope.row.pay_state === 2"
            >退款处理中</el-tag
          >
          <el-tag type="danger" v-else-if="scope.row.pay_state === 3"
            >已退款</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column label="系统订单号" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.system_order_no }}
        </template>
      </el-table-column>

      <el-table-column label="系统订单状态" min-width="110" align="center">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.system_order_status === 100"
            >下单待处理</el-tag
          >
          <el-tag
            type="success"
            v-else-if="scope.row.system_order_status === 101"
            >下单成功</el-tag
          >
          <el-tag
            type="danger"
            v-else-if="scope.row.system_order_status === 102"
            >下单失败</el-tag
          >
          <el-tag
            type="success"
            v-else-if="scope.row.system_order_status === 201"
            >取消订单成功</el-tag
          >
          <el-tag
            type="danger"
            v-else-if="scope.row.system_order_status === 202"
            >取消订单失败</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作处理失败信息" min-width="140" align="center">
        <template slot-scope="scope">
          {{ scope.row.handle_error_message }}
        </template>
      </el-table-column>
      <el-table-column label="备注" min-width="140" align="center">
        <template slot-scope="scope">
          {{ scope.row.remark || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.created_at }}
        </template>
      </el-table-column>

      <!--      <el-table-column label="操作" width="250" align="center" fixed="right" class-name="small-padding fixed-width">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-button type="warning" size="mini" @click="handleModifyLastArrTime(scope.row)"-->
      <!--                     :disabled="scope.row.system_order_status !== 102">修改到店时间-->
      <!--          </el-button>-->

      <!--          <el-button type="warning" size="mini" @click="handleReOrder(scope.row)"-->
      <!--                     :disabled="!(scope.row.system_order_status === 102)">重新下单-->
      <!--          </el-button>-->

      <!--          <el-button type="warning" size="mini" @click="handleCancelOrder(scope.row)"-->
      <!--                     :disabled="!(scope.row.order_state === 1)">取消订单-->
      <!--          </el-button>-->

      <!--          <el-button type="warning" size="mini" @click="handleComplete(scope.row)"-->
      <!--                     :disabled="handleCompleteStatus(scope.row)">处理完成-->
      <!--          </el-button>-->
      <!--          <el-button type="warning" size="mini" @click="handleChangeSystemOrderStatus(scope.row)"-->
      <!--          >修改系统订单状态-->
      <!--          </el-button>-->
      <!--          <el-button type="warning" size="mini" @click="syncOrder(scope.row)">同步订单</el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>

    <div class="pagination-container">
      <el-pagination
        :current-page="listQuery.page"
        :page-sizes="[5, 10, 20, 30, 50]"
        :page-size="listQuery.limit"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 修改到店时间 -->
    <el-dialog
      title="修改到店时间"
      :visible.sync="dialogVisibleModifyLastArrTime"
      width="60%"
      :close-on-click-modal="false"
    >
      <el-form
        ref="modifyLastArrTimeForm"
        :rules="modifyLastArrTimeRules"
        :model="modifyLastArrTimeForm"
        label-width="150px"
      >
        <el-form-item label="修改到店时间" prop="last_arr_time">
          <el-date-picker
            v-model="modifyLastArrTimeForm.last_arr_time"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleModifyLastArrTime = false"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="saveDataModifyLastArrTime"
          :loading="btnLoading"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <!-- 修改到店时间 -->

    <!-- 修改系统订单状态 -->
    <el-dialog
      title="修改系统订单状态"
      :visible.sync="dialogVisibleChangeSystemOrderStatus"
      width="60%"
      :close-on-click-modal="false"
    >
      <el-form
        ref="changeSystemOrderStatusForm"
        :rules="changeSystemOrderStatusRules"
        :model="changeSystemOrderStatusForm"
        label-width="150px"
      >
        <el-form-item label="修改系统订单状态" prop="system_order_status">
          <el-select
            class="filter-item"
            v-model="changeSystemOrderStatusForm.system_order_status"
            placeholder="系统订单状态"
            style="width: 160px"
            clearable
          >
            <el-option label="下单待处理" :value="100" />
            <el-option label="下单成功" :value="101" />
            <el-option label="下单失败" :value="102" />
            <el-option label="取消订单成功" :value="201" />
            <el-option label="取消订单失败" :value="202" />
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleChangeSystemOrderStatus = false"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="saveDataChangeSystemOrderStatus"
          :loading="btnLoading"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <!-- 修改系统订单状态 -->
  </div>
</template>

<script>
import request from '@/utils/request'
import downloadExcel from 'vue-json-excel'
import moment from 'moment'

export default {
  components: { downloadExcel },
  data() {
    return {
      clientNameOptions: [],
      loadingClients: false,
      clientPage: 1,
      clientKeyword: '',
      clientFinished: false,
      pageSize: 99999999,

      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        app_client_id: '',
        order_id: '',
        state: '',
        order_code: '',
        order_state: '',
        system_order_no: '',
        system_order_status: '',
      },
      data: {
        total_account_money: 0,
        total_channel_money: 0,
      },
      // 修改到店时间
      btnLoading: false,
      dialogVisibleModifyLastArrTime: false,
      modifyLastArrTimeForm: {
        order_id: '',
        last_arr_time: '',
      },
      modifyLastArrTimeRules: {
        last_arr_time: [
          { required: true, message: '到店时间不能为空', trigger: 'change' },
        ],
      },
      dialogVisibleChangeSystemOrderStatus: false,
      changeSystemOrderStatusForm: {
        order_id: '',
        system_order_status: '',
      },
      changeSystemOrderStatusRules: {
        system_order_status: [
          { required: true, message: '系统状态不能为空', trigger: 'change' },
        ],
      },
      dateArr: null,
      dateArr1: null,
      dateArr2: null,
      dateArr3: null,
      exportLoading: false,
      json_fields: {
        订单号: {
          field: 'order_id',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        // 自我游订单状态: {
        //   field: 'state',
        //   //自定义回调函数
        //   callback: (value) => {
        //     var state_remark;
        //     switch (value) {
        //       case '0':
        //         state_remark = '新订单'
        //         break;
        //       case '1':
        //         state_remark = '已确认'
        //         break;
        //       case '2':
        //         state_remark = '已成功'
        //         break;
        //       case '3':
        //         state_remark = '已取消'
        //         break;
        //       case '4':
        //         state_remark = '已完成'
        //         break;
        //       default:
        //         state_remark = ''
        //         break;
        //     }
        //
        //     return '<p style="mso-number-format:\'\\@\';">' + state_remark + '</p>'
        //   },
        // },
        下单时间: {
          field: 'order_date',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        渠道结算价: {
          field: 'channel_money',
          //自定义回调函数
          callback: (value) => {
            return value
          },
        },
        渠道价实际账期金额: {
          field: 'actual_channel_money',
          //自定义回调函数
          callback: (value) => {
            return value
          },
        },
        联系人姓名: {
          field: 'link_man',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        联系人手机: {
          field: 'link_phone',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        入住时间: {
          field: 'travel_date',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        离店时间: {
          field: 'end_travel_date',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        实际离店时间: {
          field: 'actual_end_travel_date',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        酒店名称: {
          field: 'hotel',
          //自定义回调函数
          callback: (value) => {
            return (
              '<p style="mso-number-format:\'\\@\';">' +
              (value ? value.inn_name : '') +
              '</p>'
            )
          },
        },
        售卖房型名称: {
          field: 'room_type',
          //自定义回调函数
          callback: (value) => {
            return (
              '<p style="mso-number-format:\'\\@\';">' +
              (value ? value.room_type_name : '') +
              '</p>'
            )
          },
        },
        房间间数: {
          field: 'room_num',
          //自定义回调函数
          callback: (value) => {
            return value
          },
        },
        锦江订单编号: {
          field: 'room_num',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        锦江到店时间: {
          field: 'last_arr_time',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        锦江订单状态: {
          field: 'order_state',
          //自定义回调函数
          callback: (value) => {
            var state_remark
            switch (value) {
              case 1:
                state_remark = '预订成功'
                break
              case 2:
                state_remark = '已取消'
                break
              case 3:
                state_remark = '预订未到'
                break
              case 4:
                state_remark = '已入住'
                break
              case 5:
                state_remark = '已完成'
                break
              default:
                state_remark = ''
                break
            }

            return (
              '<p style="mso-number-format:\'\\@\';">' + state_remark + '</p>'
            )
          },
        },
        锦江支付状态: {
          field: 'pay_state',
          //自定义回调函数
          callback: (value) => {
            var state_remark
            switch (value) {
              case 0:
                state_remark = '未付款'
                break
              case 1:
                state_remark = '已付款'
                break
              case 2:
                state_remark = '退款处理中'
                break
              case 3:
                state_remark = '已退款'
                break
              default:
                state_remark = ''
                break
            }

            return (
              '<p style="mso-number-format:\'\\@\';">' + state_remark + '</p>'
            )
          },
        },
        系统订单号: {
          field: 'system_order_no',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        系统订单状态: {
          field: 'system_order_status',
          //自定义回调函数
          callback: (value) => {
            var state_remark
            switch (value) {
              case 100:
                state_remark = '下单待处理'
                break
              case 101:
                state_remark = '下单成功'
                break
              case 102:
                state_remark = '下单失败'
                break
              case 201:
                state_remark = '取消订单成功'
                break
              case 202:
                state_remark = '取消订单失败'
                break
              default:
                state_remark = ''
                break
            }

            return (
              '<p style="mso-number-format:\'\\@\';">' + state_remark + '</p>'
            )
          },
        },
        操作处理失败信息: {
          field: 'handle_error_message',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        备注: {
          field: 'remark',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        创建时间: {
          field: 'created_at',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
      },
    }
  },
  created() {
    if (this.$route.query.settlement_date) {
      this.listQuery.end_travel_date_start_at = moment(
        this.$route.query.settlement_date
      )
        .startOf('month')
        .format('YYYY-MM-DD')
      this.listQuery.end_travel_date_end_at = moment(
        this.$route.query.settlement_date
      )
        .endOf('month')
        .format('YYYY-MM-DD')
      this.listQuery.order_state_arr = [Number(this.$route.query.order_state)]
      this.listQuery.system_order_status_arr = [
        Number(this.$route.query.system_order_status),
      ]
      this.dateArr1 = [
        this.listQuery.end_travel_date_start_at,
        this.listQuery.end_travel_date_end_at,
      ]
    }

    // this.fetchClientNames('');
    this.getList()
  },
  watch: {
    dateArr(newVal, oldVal) {
      if (newVal) {
        this.listQuery.start_at = newVal[0]
        this.listQuery.end_at = newVal[1]
      } else {
        this.listQuery.start_at = ''
        this.listQuery.end_at = ''
      }
    },
    dateArr1(newVal, oldVal) {
      if (newVal) {
        this.listQuery.end_travel_date_start_at = newVal[0]
        this.listQuery.end_travel_date_end_at = newVal[1]
      } else {
        this.listQuery.end_travel_date_start_at = ''
        this.listQuery.end_travel_date_end_at = ''
      }
    },
    dateArr2(newVal, oldVal) {
      if (newVal) {
        this.listQuery.order_date_start_at = newVal[0] + ' 00:00:00'
        this.listQuery.order_date_end_at = newVal[1] + ' 23:59:59'
      } else {
        this.listQuery.order_date_start_at = ''
        this.listQuery.order_date_end_at = ''
      }
    },
    dateArr3(newVal, oldVal) {
      if (newVal) {
        this.listQuery.actual_end_travel_date_start_at = newVal[0]
        this.listQuery.actual_end_travel_date_end_at = newVal[1]
      } else {
        this.listQuery.actual_end_travel_date_start_at = ''
        this.listQuery.actual_end_travel_date_end_at = ''
      }
    },
  },
  methods: {
    fetchClientNames(query) {
      // 每次新搜索或首次加载都重置
      this.clientPage = 1
      this.clientKeyword = query
      this.clientFinished = false
      this.clientNameOptions = []
      this.loadMoreClients()
    },
    loadMoreClients() {
      if (this.clientFinished || this.loadingClients) return

      this.loadingClients = true

      request({
        url: '/api/appClientend/app-client/list',
        method: 'get',
        params: {
          name: this.clientKeyword,
          page: this.clientPage,
          limit: this.pageSize,
        },
      })
        .then((res) => {
          const list = res.data.data || []

          if (list.length < this.pageSize) this.clientFinished = true

          this.clientNameOptions = this.clientNameOptions.concat(
            list.map((item) => ({
              label: item.name, // 成员公司名称
              value: item.id, // 也使用名称作为 value
            }))
          )
          if (this.$route.query.app_client_id) {
            this.listQuery.app_client_id = Number(
              this.$route.query.app_client_id
            )
          }
          this.clientPage++
        })
        .finally(() => {
          this.loadingClients = false
        })
    },
    // 监听下拉框打开，绑定滚动分页
    handleClientSelectVisible(visible) {
      if (!visible) return

      this.$nextTick(() => {
        // 使用 Element UI 的 class：el-scrollbar__wrap
        const dropdown = document.querySelector('.el-scrollbar__wrap')
        if (dropdown && !dropdown.dataset.bound) {
          dropdown.dataset.bound = 'true' // 防止重复绑定

          dropdown.addEventListener('scroll', () => {
            const nearBottom =
              dropdown.scrollTop + dropdown.clientHeight >=
              dropdown.scrollHeight - 10
            if (nearBottom) {
              this.loadMoreClients()
            }
          })
        }
      })
    },
    handleExport() {
      if (this.listQuery.state_arr) {
        this.listQuery.state = this.listQuery.state_arr.join(',')
      }

      if (this.listQuery.order_state_arr) {
        this.listQuery.order_state = this.listQuery.order_state_arr.join(',')
      }

      if (this.listQuery.system_order_status_arr) {
        this.listQuery.system_order_status =
          this.listQuery.system_order_status_arr.join(',')
      }

      if (this.listQuery.pay_state_arr) {
        this.listQuery.pay_state = this.listQuery.pay_state_arr.join(',')
      }
      this.exportLoading = true
      var listQuery = JSON.parse(JSON.stringify(this.listQuery))
      listQuery.limit = 9999999999
      return request({
        url: '/api/appClientend/order/orderList',
        method: 'get',
        params: listQuery,
      })
        .then((response) => {
          return response.data.items
        })
        .finally(() => {
          this.exportLoading = false
        })
    },
    getList() {
      if (this.listQuery.state_arr) {
        this.listQuery.state = this.listQuery.state_arr.join(',')
      }

      if (this.listQuery.order_state_arr) {
        this.listQuery.order_state = this.listQuery.order_state_arr.join(',')
      }

      if (this.listQuery.system_order_status_arr) {
        this.listQuery.system_order_status =
          this.listQuery.system_order_status_arr.join(',')
      }

      if (this.listQuery.pay_state_arr) {
        this.listQuery.pay_state = this.listQuery.pay_state_arr.join(',')
      }

      this.listLoading = true
      request({
        url: '/api/appClientend/order/orderList',
        method: 'get',
        params: this.listQuery,
      }).then((response) => {
        this.list = response.data.items
        this.total = response.data.total
        this.data = response.data.count
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    errorRow({ row }) {
      let errorStatus = [102, 202]
      if (
        errorStatus.includes(row.system_order_status) &&
        row.error_order_handle_status === 0
      ) {
        return 'error-row'
      }
      return ''
    },
    // 修改到店时间
    handleModifyLastArrTime(row) {
      this.modifyLastArrTimeForm = {
        order_id: row.order_id,
        last_arr_time: '',
      }
      this.dialogVisibleModifyLastArrTime = true
      this.$nextTick(() => {
        this.$refs['modifyLastArrTimeForm'].clearValidate() //清除校验结果
      })
    },
    saveDataModifyLastArrTime() {
      this.$refs['modifyLastArrTimeForm'].validate((valid) => {
        if (valid) {
          this.btnLoading = true
          request({
            url: '/api/backend/order/modifyLastArrTime',
            method: 'post',
            data: this.modifyLastArrTimeForm,
          })
            .then(() => {
              this.dialogVisibleModifyLastArrTime = false
              this.$message({
                type: 'success',
                message: '操作成功',
              })
              this.getList()
            })
            .finally(() => {
              this.btnLoading = false
            })
        }
      })
    },
    // 修改系统状态
    handleChangeSystemOrderStatus(row) {
      this.changeSystemOrderStatusForm = {
        order_id: row.order_id,
        system_order_status: row.system_order_status,
      }
      this.dialogVisibleChangeSystemOrderStatus = true
      this.$nextTick(() => {
        this.$refs['changeSystemOrderStatusForm'].clearValidate() //清除校验结果
      })
    },
    saveDataChangeSystemOrderStatus() {
      this.$refs['changeSystemOrderStatusForm'].validate((valid) => {
        if (valid) {
          this.btnLoading = true
          request({
            url: '/api/backend/order/changeSystemOrderStatus',
            method: 'post',
            data: this.changeSystemOrderStatusForm,
          })
            .then(() => {
              this.dialogVisibleChangeSystemOrderStatus = false
              this.$message({
                type: 'success',
                message: '操作成功',
              })
              this.getList()
            })
            .finally(() => {
              this.btnLoading = false
            })
        }
      })
    },
    // 重新下单
    handleReOrder(row) {
      this.$confirm('确认继续该操作', '提示', {
        type: 'warning',
      })
        .then(() => {
          request({
            url: '/api/backend/order/reOrder',
            method: 'post',
            data: {
              order_id: row.order_id,
            },
          }).then(() => {
            this.getList()
            this.$message({
              type: 'success',
              message: '操作成功',
            })
          })
        })
        .catch(() => {})
    },
    // 取消订单
    handleCancelOrder(row) {
      this.$confirm('确认继续该操作', '提示', {
        type: 'warning',
      })
        .then(() => {
          request({
            url: '/api/backend/order/cancelOrder',
            method: 'post',
            data: {
              order_id: row.order_id,
            },
          }).then(() => {
            this.getList()
            this.$message({
              type: 'success',
              message: '操作成功',
            })
          })
        })
        .catch(() => {})
    },
    // 处理完成
    handleComplete(row) {
      this.$confirm('确认继续该操作', '提示', {
        type: 'warning',
      })
        .then(() => {
          request({
            url: '/api/backend/order/handleComplete',
            method: 'post',
            data: {
              order_id: row.order_id,
            },
          }).then(() => {
            this.getList()
            this.$message({
              type: 'success',
              message: '操作成功',
            })
          })
        })
        .catch(() => {})
    },
    // 同步订单
    syncOrder(row) {
      this.$confirm('确认继续该操作', '提示', {
        type: 'warning',
      })
        .then(() => {
          request({
            url: '/api/backend/order/syncOrder',
            method: 'post',
            data: {
              order_id: row.order_id,
            },
          }).then(() => {
            this.getList()
            this.$message({
              type: 'success',
              message: '操作成功',
            })
          })
        })
        .catch(() => {})
    },
    handleCompleteStatus(row) {
      let errorStatus = [102, 202]
      return !(
        errorStatus.includes(row.system_order_status) &&
        row.error_order_handle_status === 0
      )
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.box-card {
  text-align: center;

  .value {
    color: #546dfe;
    font-weight: bold;
    font-size: 26px;
  }

  .subtitle {
    font-size: 12px;
    color: gray;
    margin-top: 6px;
  }
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  margin-bottom: 20px;
}

::v-deep .el-table .error-row {
  background-color: rgba(255, 0, 0, 0.2);
}
</style>
